<template>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>薪资：{{ person.job.salary }}</h2>
    <button @click="person.name += '!'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.salary++">修改薪资</button>

    <p style="text-align: left;border-top: 1px solid #000;">
        在控制台查看输出效果
        <br>
        <br>
        配置项 deep：如果源是对象或数组，则强制深度遍历源，以便在深度变更时触发回调。
        <br>
        <br>
        配置项 immediate：在侦听器创建时立即触发回调。第一次调用时，旧值将为 undefined
        <br>
        <br>
        对象数据类型的数据被监控时存在返回的 newValue 和 oldValue 一致的 BUG

    </p>
</template>

<script lang="ts">
import { reactive, watch } from 'vue'

export default {
    name: 'watch_reactive',
    setup() {

        // 数据（响应式）
        let person = reactive({
            name: '张三',
            age: 18,
            job:{
                salary:12
            }

        })

        // 监控（全部属性）
        // watch(
        //     person,
        //     (newValue, oldValue) => {
        //         console.log('person 发生改变', newValue, oldValue);
        //     }
        // )


        // 监控（单个属性）
        // watch(
        //     ()=>person.name,
        //     (newValue, oldValue) => {
        //         console.log('person 的name 发生改变', newValue, oldValue);
        //     }
        // )

        // 监控（多个属性）
        // watch(
        //     [() => person.name,() => person.age],
        //     (newValue, oldValue) => {
        //         console.log('person 的 name 和 age 发生改变', newValue, oldValue);
        //     }
        // )

        
        // 监控（修改某个属性 A 的子属性 a,同时监控 属性A。此时需要开启深度监视（deep），但旧值仍然无法正确获取
        // watch(
        //     ()=>person.job,
        //     (newValue, oldValue) => {
        //         console.log('person 的 job.salary 发生改变', newValue, oldValue);
        //     },
        //     {
        //         deep:true
        //     }
        // )

        // 监控（修改某个属性 A 的子属性 a,同时监控子属性a。此时无需手动开启深度监控，能正确获取到旧值
        watch(
            ()=>person.job.salary,
            (newValue, oldValue) => {
                console.log('person 的 job.salary 发生改变', newValue, oldValue);
            }
        )


        return {
            person

        }
    }
} 
</script>
<style></style>